<template>
  <div>

    <el-card style="margin-top: 20px;">
      <el-card>
        <div slot="header" class="clearfix">
          账单信息
        </div>
        <el-timeline>
          <el-timeline-item :timestamp="item.end_date" v-for="(item, index) in order"
                            :key="index"
                            icon="el-icon-check"
                            size="large">

            <span style="margin-right: 10px">{{item.period+'/'+item.total_period}}期租金收益  </span> <b> ￥{{item.end_payoff}} </b><b>+ ￥{{item.end_capital}} </b>
<!--            <b v-if="item.end_money>0"> +￥{{item.end_money}} </b>-->
            <b style="float: right; padding: 3px 0">{{statusShow[item.status]}}</b>

          </el-timeline-item>
          <el-timeline-item>
            <div style="text-align: right" v-if="info.end_money>0">账单总额：￥{{info.end_money}}</div>
            <div style="text-align: right" v-if="info.total_money>0">含回收费用：{{info.total_money}}元</div>
          </el-timeline-item>
        </el-timeline>
      </el-card>

    </el-card>
  </div>
</template>

<script>
  const statusShow = {
    0: '未回款', 1: '已回款'
  }
  export default {
    name: 'OrderStage',
    props: {
      order: {
        type: Array,
        default: () => {
          return []
        }
      },
      info: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data() {
      return {
        statusShow
      }

    },
    created() {
    },
    methods: {}
  }
</script>

<style scoped>

</style>
